<template>
  <div>
    <el-dialog
      title="查看上级"
      :visible.sync="SuperiorShow"
      @click="onClose"
      width="30%"
      center
    >
      <!-- <el-row :gutter="10"> -->
      <div class="mainBox">
        <el-steps :active="CheckSuperiorNumber" direction="vertical">
          <el-step
            v-for="item in CheckSuperiorData"
            :key="item.userId"
            :title="item.userName"
          ></el-step>
        </el-steps>
      </div>

      <!-- </el-row> -->
    </el-dialog>
  </div>
</template>
<script>
import { selectByHierarchy } from "@/api/base/index.js";
export default {
  props: ["IdData"],
  components: {},
  data() {
    return {
      CheckSuperiorData: [],
      SuperiorShow: false,
      // 查看上级数据显示的最后一位
      CheckSuperiorNumber: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // this.gitData();
    // this.components=true;
  },
  methods: {
    async gitData() {
      this.SuperiorShow = true;
      this.$nextTick(async () => {
        const { data } = await selectByHierarchy({ userId: this.IdData });
        this.CheckSuperiorData = data;
        this.CheckSuperiorNumber = data.length - 1;
      });
    },
    handelConfirm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        this.close();
      });
    },
  },
};
</script>
<style scoped lang='scss'>
.mainBox{
  // border: 1px red solid;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .el-step__head.is-finish{
  // background: rgb(75, 129, 243);
  // border-right: 50%;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #eeeeee;
  width: 90%;
  margin: auto;
  padding-left: 0;
}
</style>
<style>
body .el-scrollbar__wrap {
  overflow-x: hidden;
  /* //隐藏横向滚动条   */
}

/* 但是隐藏横向滚动条样式会导致element 下拉框最后一位显示不完整，为了避免这个问题，再加上 */
.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
  overflow: scroll !important;
}
</style>
<style scoped lang="scss">
.box {
  // border: 1px red solid;
  padding-bottom: 10px;
  // border-bottom: 1px rgb(104, 104, 104) solid;
  margin-bottom: 10px;
  .hadeBox {
    //  border: 1px red solid;
    display: flex;
    flex-direction: column;
    .hadeText {
    }
  }
  .textBox {
    margin-top: 10px;
    border: 1px rgb(182, 182, 182) dashed;
    border-radius: 7px;
    padding: 10px;
  }
}
</style>
